<template>
    <div class="main-list">
        <ul class="list">
            <li v-for="item in list" @click="locationHref('/home/main/detail/success?id=' + item.id)">
                <div>
                    <img :src="item.img" alt="">
                </div>
                <dl>
                    <dt>{{item.title | len12}}</dt>
                    <dd>兑换日期：{{item.add_time}}</dd>
                </dl>
                <img src="~assets/img/car/right.jpg" alt="">
            </li>
        </ul>
        <section class="sec-button">
            <button class="vp-btn-blue" @click="locationHref('/home/main')">
                返回
            </button>
        </section>
    </div>
</template>

<script>
    import Swiper from 'swiper';
    import 'swiper/dist/css/swiper.min.css';
    export default {
        name:'detail',

        data() {
            return {
                list: []
            }
        },

        components:{
            
        },

        mounted() {
            this.axios.get('order', {params:{
                id: localStorage.id
            }}).then(data => {
                if (data.status == 200) {
                    this.list = data.data;
                } else {
                    this.$toast('服务器异常，请重试');
                }
            })
        }
    }
</script>

<style lang="less" scoped rel="stylesheet/less" type="text/css">
    @import '../../../plugins/assets/css/flex.less';
    @import '../../../assets/css/car.less';
    .main-list {
        min-height:100vh;
        background: #F0F0F0;
        .list {
            font-size: .28rem;
            padding-bottom: 1.1rem;
            li {
                background: #fff;
                padding: .3rem;
                padding-left: .7rem;
                margin-bottom: 1px;
                .flex-between;
                > :first-child {
                    width: 20%;
                    text-align: center;
                    img {
                        max-width: 100%;
                    }
                }
                dl {
                    // margin-left: -.5rem;
                    width: 60%;
                    dt {
                        margin-bottom: .25rem;
                        font-weight: bold;
                    }
                }
                > :last-child {
                    width: .15rem;
                }
            }
        }
        .sec-button {
            position: fixed;
            bottom: 0;
            width: 100%;
            .box-sizing;
            background: #fff;
            padding: .15rem .33rem;
            font-size: .32rem;
            .vp-btn-blue {
                width: 100%;
                background: #1E74DE;
                color: #fff;
                height: .75rem;
                font-size: .32rem;
                .bor(5px);
            }
        }
    }
</style>